<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="800px">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import {  ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm,  FormSchema, } from '/@/components/Form';
  import { adddictdata,updatedictdata} from '/@/api/dataDictionary/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const props = defineProps({
    dictId: {
      type: String,
      default: () => '',
    },
  });
  const isUpdate = ref(true);
  let id = ref('')
   // 表单内容
   const schemas: FormSchema[] = [
    {
      field: 'Value',
      component: 'Input',
      label: '字典值',
      colProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入字典值',
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'Code',
      component: 'Input',
      label: '字典编码',
      colProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入字典编码',
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'Name',
      component: 'Input',
      label: '名称',
      colProps: {
        span: 24,
      },
    },
    {
        field: 'Status',
        component: 'RadioGroup',
        label: '状态',
        colProps: {
          span: 14,
        },
        componentProps: {
          options: [
            {
              label: '启用',
              value: 1,
            },
            {
              label: '禁用',
              value: 2,
            },
          ],
        },
      },
      {
        field: 'OrderNo',
        component: 'InputNumber',
        label: '排序',
        colProps: {
          span: 24,
        },
        componentProps: {},
      },
      {
      field: 'Remark',
      component: 'Input',
      label: '备注',
      colProps: {
        span: 24,
      },
    },
  ];
  const { createMessage } = useMessage();
  const { t } = useI18n();
  //表单配置
  const [
    registerForm,
    { validateFields, setFieldsValue, resetFields, clearValidate, updateSchema },
  ] = useForm({
    labelWidth: 120,
    schemas: schemas,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    id.value = data?.record.Id;
    console.log('1111111===>',data.record)
    // if (unref(isUpdate)) {
    //   //表单赋值
    //   await setFieldsValue({
    //     ...data.record,
    //   });
    // }
     //表单赋值
     await setFieldsValue({
        ...data.record,
      });
  });

  //设置标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

  //表单提交事件
  async function handleSubmit() {
    try {
      let values = await validateFields();
      values.dictTypeId = props.dictId;
      setModalProps({ confirmLoading: true });
       if (!unref(isUpdate)) {
          //提交表单
         await adddictdata([values]);
        }else{
          await updatedictdata([{ Id: id.value, ...values }]);
          
        }
      createMessage.success(t('layout.setting.operatingTitle'));
       //关闭弹窗
       closeModal();
      //刷新列表
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
